<template>
	<view class="count">
		<view class="topTabs">
			<u-tabs :list="list" :is-scroll="false" active-color="#009D85" :current="current" @change="change"></u-tabs>
		</view>
		<view class="p-20">
			<view class="topBody p-20 b-f b-r-20">
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						isbn码
					</view>
					<input type="text" class="rigCode" v-model="isbnValue" placeholder="请输入isbn码" name="" @blur="blur"
						id="">
				</view>
				<view class="bot">
					<view class="unload">
						书籍封面图上传 <text>（单张）</text>
					</view>
					<view class="pingText m-t-10">
						<u-upload ref="uUpload" :file-list="fileList" :show-progress="false" upload-text="点击上传"
							max-count="1" :form-data="fromData" @on-success="succress" :before-upload="beforeUpload"
							width="190" height="190" :action="url"></u-upload>
					</view>
				</view>
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						书籍名称
					</view>
					<input type="text" class="rigCode" v-model="booksValue" placeholder="请输入书籍名称" name="" id="">
				</view>
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						书籍作者
					</view>
					<input type="text" class="rigCode" v-model="achtValue" placeholder="请输入书籍名称" name="" id="">
				</view>
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						书籍出版社
					</view>
					<input type="text" class="rigCode" v-model="houseValue" placeholder="请输入书籍出版社" name="" id="">
				</view>
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						书籍所属丛书
					</view>
					<input type="text" class="rigCode" v-model="whatValue" placeholder="请输入书籍所属丛书" name="" id="">
				</view>
				<!-- 年龄 -->
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						适读年龄
					</view>
					<view @click="books(1)" class="rigCode f f-a-c">
						{{setelAge}}
						<image src="/static/my/you.png" class="youjian m-l-10" mode=""></image>
					</view>
				</view>
				<!-- 书籍标签 -->
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						书籍标签
					</view>
					<view @click="books(2)" class="rigCode f f-a-c">
						{{pleaseSelect.length!=0?pleaseSelect.join(' '):'请选择'}}
						<image src="/static/my/you.png" class="youjian m-l-10" mode=""></image>
					</view>
				</view>
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						页数
					</view>
					<input type="text" class="rigCode" v-model="numValue" placeholder="请输入页数" name="" id="">
				</view>
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						价格
					</view>
					<input type="text" class="rigCode" v-model="priceValue" placeholder="请输入价格" name="" id="">
				</view>
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						书籍简介
					</view>
					<input type="text" class="rigCode" v-model="introValue" placeholder="请输入书籍简介" name="" id="">
				</view>
				<!-- 书籍分类 -->
				<view class="topIsdn f f-a-c f-j-b">
					<view class="le">
						书籍分类
					</view>
					<view @click="books(3)" class="rigCode f f-a-c">
						{{category_name}}
						<image src="/static/my/you.png" class="youjian m-l-10" mode=""></image>
					</view>
				</view>
			</view>

			<view @click="comfig" class="comig">
				保存
			</view>
			<u-picker v-model="show1" :range="initData.age_limits" range-key="name" @confirm="confirmFn1"
				mode="selector"></u-picker>
			<u-picker v-model="show2" :range="initData.book_tags" range-key="name" @confirm="confirmFn2"
				mode="selector"></u-picker>
			<u-picker v-model="show3" :range="fenList" range-key="name" @confirm="confirmFn3"
				mode="selector"></u-picker>
			<!-- <u-picker v-model="show3" :range="selector" @confirm="confirmFn3" mode="selector"></u-picker> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				initData: uni.getStorageSync('initData'),
				show1: false,
				show2: false,
				show3: false,
				category_name: '请选择书籍分类',
				pleaseSelect: [],
				setelAge: '请选择适读年龄',
				isbnValue: '',
				whatValue: '',
				houseValue: '',
				achtValue: '',
				booksValue: '',
				priceValue: '',
				numValue: '',
				introValue: '',
				id1: '',
				id2: [],
				fileList: [],
				id3: '',
				selector: [1, 2, 3],
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				list: [{
					name: '手动添加'
				}, {
					name: '扫码添加'
				}],
				current: 0,
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				domain: uni.getStorageSync('domain'),
				imgList: [],
				fenList: [],
				fenListImg: [],
				category_id: '',
			}
		},
		onLoad() {
			this.fromData.key = this.genKey()
			this.initFen()
		},
		methods: {
			async initFen() {
				let n = await this.$api.BookClassification()
				this.fenList = n.data.categories
			},
			// 失去焦点的时候
			async blur() {
				let n = await this.$api.Isbn({
					isbn: this.isbnValue
				})
				this.$msg(n.data.reason)
				this.isbnValue = n.data.result.data.isbn
				this.houseValue = n.data.result.data.publisher
				this.booksValue = n.data.result.data.title
				this.achtValue = n.data.result.data.author
				this.whatValue = n.data.result.data.series
				this.numValue = n.data.result.data.page
				this.priceValue = n.data.result.data.price
				this.introValue = n.data.result.data.gist
				this.fileList = [{
					url: n.data.result.data.img
				}]
				this.current = 0
				console.log(this.isbnValue, '999999999999999');
			},
			// 创建9787567783379
			async comfig() {
				if (!this.isbnValue && !this.imgList[0] && !this.booksValue && !this.achtValue &&
					!this.houseValue && !this.whatValue && !this.numValue && !this.priceValue && !this.introValue &&
					!this.id2.length && !this.id1 && !this.category_id

				) return this.$msg('请填写完整信息')
				let n = await this.$api.CreateBooks({
					isbn: this.isbnValue,
					cover: this.imgList[0] || this.fileList[0].url,
					name: this.booksValue,
					author: this.achtValue,
					press: this.houseValue,
					series: this.whatValue,
					page_num: this.numValue,
					price: this.priceValue,
					intro: this.introValue,
					tag_id: this.id2.join(' '),
					age_limit_id: this.id1,
					category_id: this.category_id
				})
				this.$msg(n.message)
				if (n.status) {
					setTimeout(() => {
						uni.redirectTo({
							url: '/pageC/Append'
						})
					}, 1000)
				}
			},
			succress(data, index, lists, name) {
				this.imgList.push(this.domain + '/' + data.key)
			},
			beforeUpload(index, list) {
				// this.imgList = list.filter(item => {
				// 	return this.domain + '/' + item.response.key
				// })
				this.fromData.key = this.genKey()
				return true
			},
			genKey() {
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				return n
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				return num;
			},
			books(num) {
				if (num == 1) {
					// 适读年龄
					this.show1 = true
				} else if (num == 2) {
					// 书籍标签
					this.show2 = true
				} else if (num == 3) {
					// 书籍分类
					this.show3 = true
				}
			},
			//下拉点击确认
			confirmFn1(e) {
				console.log(e, '11111');
				this.setelAge = this.initData.age_limits[e[0]].name
				this.id1 = this.initData.age_limits[e[0]].id
			}, //下拉点击确认
			confirmFn2(e) {
				if (this.pleaseSelect.includes(this.initData.book_tags[e[0]].name)) {
					return this.$msg('已选择')
				}
				this.pleaseSelect.push(this.initData.book_tags[e[0]].name)
				this.id2.push(this.initData.book_tags[e[0]].id)
			}, //下拉点击确认
			confirmFn3(e) {
				console.log(e, '33333');
				this.category_id = this.fenList[e].id
				this.category_name = this.fenList[e].name
			},
			change(e) {
				// console.log(e, '8888888');
				this.current = e
				if (e == 1) {
					uni.scanCode({
						// 9787567783379
						success: async (res) => {
							let n = await this.$api.Isbn({
								isbn: String(res.result).split('-').join('')
							})
							this.$msg(n.data.reason)
							this.isbnValue = n.data.result.data.isbn
							this.houseValue = n.data.result.data.publisher
							this.booksValue = n.data.result.data.title
							this.achtValue = n.data.result.data.author
							this.whatValue = n.data.result.data.series
							this.numValue = n.data.result.data.page
							this.priceValue = n.data.result.data.price
							this.introValue = n.data.result.data.gist
							this.fileList = [{
								url: n.data.result.data.img
							}]
							this.current = 0
							console.log('条码类型：' + n.data.result.data.img);
							console.log('条码内容：' + res.result);
						}
					});
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.count {
		// height: 100vh;
		width: 100%;
		// overflow-y: auto;
		// padding-bottom: 200rpx;
	}

	.comig {
		width: 90%;
		margin: 0 auto;
		height: 88rpx;
		z-index: 9;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		margin-top: 60rpx;
	}

	.youjian {
		width: 12rpx;
		height: 24rpx;
	}

	.unload {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;

		text {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #999999;
		}
	}

	.topIsdn {
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #f8f8f8;
		margin-bottom: 30rpx;

		.le {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			flex: 1;
		}

		.rigCode {
			flex: 2;
			justify-content: flex-end;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #999999;
			text-align: right
		}
	}

	.topTabs {
		width: 100%;
		height: 80rpx;
		background: #ffffff;
		backdrop-filter: blur(40rpx);
	}
</style>